<!-- 評論子組件 -->
<template>
  <div>
    <div  class="cmt-container">
      <h3 >发表评论</h3>
      <hr > 
      <textarea  placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model="msg"></textarea>
      <button  class="mint-button mint-button--primary mint-button--large" @click="postComment">
        <!----><label class="mint-button-text" >发表评论</label></button>
      <div  class="cmt-list" v-for="(item, i ) in comments" :key ="item.add_time">
        <div  class="cmt-item">
          <div  class="cmt-title">
            第{{i + 1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat('YYYY-MM-DD')}}
          </div>
          <div class="cmt-body">
            {{item.content}}
          </div>
        </div>
      </div> <button  class="mint-button mint-button--danger mint-button--large is-plain" @click="more">
        <!----><label class="mint-button-text">加载更多</label></button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          comments : [],
          pageIndex :1,
          msg : ''
      };
    },
    created(){
        this.getComments()
    },
    components: {},

    computed: {},

    mounted: {
    },

    methods: {
         getComments(){
            this.$http.get("http://027xin.com:8899/api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(res=>{
                if(res.body.status === 0){
                    // console.log(res.body.message)
                    this.comments = this.comments.concat(res.body.message)
                }else{
                    console.log("獲取評論失敗");       
                }
            })
        },
        more(){
            this.pageIndex++
            this.getComments();
        },
        postComment(){
            this.$http.post("http://027xin.com:8899/api/postcomment/" + this.$route.params.id,{
                content: this.msg.trim()
            }).then(res=>{
                if(res.body.status === 0){
                    let cmt = {
                        user_name : '承接一切網賭黃色網址',
                        add_time : Date.now(),
                        content : this.msg
                    }
                    this.comments.unshift(cmt)
                    this.msg = ''
                }else{
                    console.log('數據評論失敗');
                }
            })
        }
    },
    props: ["id"]
  };

</script>
<style lang="less">
.cmt-container {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 14px;
    height: 85px;
    margin: 0;
  }

  .cmt-list {
    margin: 5px 0;
    .cmt-item {
      font-size: 13px;
      .cmt-title {
        line-height: 30px;
        background-color: #ccc;
      }
      .cmt-body {
        line-height: 35px;
        text-indent: 2em;
      }
    }
  }
}
</style>
